<template>
  <div class="vuex">
    <p>{{ count }}</p>
    <p>{{ countAlias }}</p>
    <p>{{ countPlusLocalState }}</p>
    <p>{{ doneTodosAlias }}</p>
    <p>{{ doneTodosCount }}</p>
    <p>{{ getTodoById(2) }}</p>
    <p>{{ getTodoByIdAlias()(2) }}</p>
    <button @click="addCount">+</button>
    <!-- 模块的局部状态 -->
    <p>{{ $store.state.module }}</p>
  </div>
</template>

<script>
// computed 【 mapState | mapGetters 】
// methods 【 mapMutations | mapActions 】
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import store from "@/store";
import MUTATIONTYPES from "@/store/mutation-types";

export default {
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  data() {
    return {
      localCount: 1,
    };
  },
  computed: {
    ...mapState({
      count: (state) => state.count,
      countAlias: "count",
      countPlusLocalState(state) {
        return state.count + this.localCount;
      },
    }),
    ...mapGetters({
      doneTodosAlias: "doneTodos",
    }),
    ...mapGetters(["doneTodosCount", "getTodoById"]),
  },
  methods: {
    ...mapGetters({
      getTodoByIdAlias: "getTodoById",
    }),
    ...mapMutations({
      add: "addCount",
    }),
    ...mapMutations([MUTATIONTYPES.ADD_COUNT_MUTATION]),
    ...mapActions(["addCountAction"]),
    ...mapActions({
      addCountActionAlias: "addCountAction",
    }),
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    addCount() {
      console.log(this);
      this[MUTATIONTYPES.ADD_COUNT_MUTATION]({
        num: 1,
      });
      this.add({
        num: 1,
      });
      store.commit("addCount", {
        num: 1,
      });
      store.commit({
        type: "addCount",
        num: 1,
      });
      store.commit({
        type: MUTATIONTYPES.ADD_COUNT_MUTATION,
        num: 1,
      });
      store.dispatch("addCountAction", {
        num: 1,
      });
      store.dispatch({
        type: "addCountAction",
        num: 1,
      });
      this.addCountAction({
        num: 1,
      });
      this.addCountActionAlias({
        num: 1,
      });
    },
  },
};

// 当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定带命名空间的模块时，写起来可能比较繁琐：
// computed: {
//   ...mapState({
//     a: state => state.some.nested.module.a,
//     b: state => state.some.nested.module.b
//   })
// },
// methods: {
//   ...mapActions([
//     'some/nested/module/foo', // -> this['some/nested/module/foo']()
//     'some/nested/module/bar' // -> this['some/nested/module/bar']()
//   ])
// }
// 对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为：
// computed: {
//   ...mapState('some/nested/module', {
//     a: state => state.a,
//     b: state => state.b
//   })
// },
// methods: {
//   ...mapActions('some/nested/module', [
//     'foo', // -> this.foo()
//     'bar' // -> this.bar()
//   ])
// }
// 而且，你可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：
// import { createNamespacedHelpers } from 'vuex'

// const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

// export default {
//   computed: {
//     // 在 `some/nested/module` 中查找
//     ...mapState({
//       a: state => state.a,
//       b: state => state.b
//     })
//   },
//   methods: {
//     // 在 `some/nested/module` 中查找
//     ...mapActions([
//       'foo',
//       'bar'
//     ])
//   }
// }
</script>
